<template>
    <a-input-group compact>
        <div class="ctlsize-input">
            <div> <a-input  v-model:value="length" @change="onChange"/></div>
            <div><a-select defaultValue="%" v-model:value="unit" @change="onChange">
                <a-select-option value="px" :disabled="disabled.includes('px')">px</a-select-option>
                <a-select-option value="%" :disabled="disabled.includes('%')">%</a-select-option>
            </a-select></div>
        </div>
    </a-input-group>
</template>

<script>
export default {
    name: 'ctl-size',

    props: {
        value:{},
        //控制不可选择 ['px','%']
        disabled:{
            default:()=>{
                return []
            }
        }
    },
    data() {
        return {
            length: "",
            unit: "%"
        }
    },
    methods: {
        init() {
            if (this.value) {
                let v = this.value.toLowerCase();
                if (v.endsWith("px")) {
                    this.length = v.substring(0, v.length - 2);
                    this.unit = "px";
                } else {
                    this.length = v.substring(0, v.length - 1);
                    this.unit = "%";
                }
            } else {
                this.length = "100";
                this.unit = "%";
            }

        },
        onChange(e){
            let val=this.length + this.unit;
            this.$emit('input',val);
        },
    },
    watch: {
        value:{
            handler(val) {
                this.init();
            },
            immediate:true
        }
    }
}
</script>

<style scoped>
.ctlsize-input{
    display: flex!important;
    margin-bottom: 2px;
}
.ctlsize-input >div:nth-child(1){
    flex: 1;
}
.ctlsize-input >div:nth-child(1) input{
    border-right: none;
    border-radius: 4px 0px 0px 4px;
}
.ctlsize-input >div:nth-child(2) >>> .ant-select-selection{
    border-radius: 0px 4px 4px 0px;
}
</style>
